// var
@modal-prefix-cls         : x-modal;
@modal-font-weight        : normal;
@modal-padding-base       : 18px;
@modal-padding-large      : 24px;
@modal-padding-small      : 12px;
@modal-font-size          : 14px;
@modal-font-size-small    : 12px;
@modal-font-size-large    : 18px;

// mixins
.modal-size(@padding; @font-size;) {
  .@{modal-prefix-cls}__content {
    font-size: @font-size;
  }
  .@{modal-prefix-cls}__header {
    font-size: @font-size * 1.4;
  }
  .@{modal-prefix-cls}__header,
  .@{modal-prefix-cls}__body,
  .@{modal-prefix-cls}__footer {
    padding: @padding/2 @padding;
  }
  .@{modal-prefix-cls}__close {
    padding: 0 @padding;
    .xvu-iconfont {
      font-size: @font-size * 1.4;
    }
  }
}

// styles - default
.@{modal-prefix-cls} {
  .modal-size(@modal-padding-base; @modal-font-size;);
  &__content {
    .fixed-margin-center;
    z-index: @zindex-modal;
    width: 520px;
    height: 320px;
    font-weight: @modal-font-weight;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0px 30px 25px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
  }
  &__header {
    border-bottom: 1px solid @border-color-base;
    position: relative;
  }
  &__body {
    height: 0;
    flex-grow: 1;
  }
  &__footer {
    border-top: 1px solid @border-color-base;
    text-align: right;
    .x-button + .x-button {
      margin-left: 10px;
    }
  }
  &__close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1em;
    box-sizing: content-box;
    cursor: pointer;
    .flex-center;
  }
  &__mask {
    .fixed-fullscreen-mask;
    z-index: @zindex-modal - 1;
  }
  // 毛玻璃效果
  @supports (-webkit-backdrop-filter:none) or (backdrop-filter:none) {
    .@{modal-prefix-cls}__mask {
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }
  }
}

// styles - more
.@{modal-prefix-cls} {
  &-small {
    .modal-size(@modal-padding-small; @modal-font-size-small;);
  }
  &-large {
    .modal-size(@modal-padding-large; @modal-font-size-large;);
  }
}
